import React from 'react';
import { NavLink, Redirect, useHistory, useLocation, useRouteMatch } from 'umi';
import './index.less';

export default function Layout(props: any) {
  const history = useHistory();
  const location = useLocation();
  const test = useRouteMatch();
  const handleLogout = () => {
    localStorage.clear();
    history.push('/login');
  };
  if (location.pathname === '/') {
    return <Redirect to="/user" />;
  }
  if (location.pathname === '/404') {
    return <>{props.children}</>;
  }
  // if (!localStorage.token && location.pathname !== '/login') {
  //   return <Redirect to="/login" />;
  // }`
  // if (location.pathname === '/login') {
  //   return <>{props.children}</>;
  // }
  return (
    <div className="layout-wrapper">
      <h1>这里是外部的layout组件</h1>
      <div className="nav-item">
        <NavLink to="/user/list">点击跳转用户列表</NavLink>
      </div>
      <div className="nav-item">
        <NavLink to="/juanshe">点击跳转圈舍列表</NavLink>
      </div>
      <button onClick={handleLogout}>点击登出</button>
      {props.children}
    </div>
  );
}
